{% extends 'base.html' %}
{% block title %}
    {{ blog.title }}
{% endblock %}

{% block nav_blog_active %}active{% endblock %}
{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-10">
                <div class="panel panel-default">
                    <div class="panel-heading">{% block blog_list_title %}
                        文章列表{% endblock %}
                    </div>
                    <div class="panel-body">
                        {% for blog in blogs %} {# 当前页有多少文章,循环输出 #}
                            <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>

                            <span class="glyphicon glyphicon-tag"></span>
                            <a href="{% url 'blog_with_type' blog.blog_type_id %}">{{ blog.blog_type }}</a>

                            <span class="glyphicon glyphicon-time"></span>
                            {{ blog.created_time|date:"Y-m-d" }}


                            <p>{{ blog.content|striptags|truncatechars:50 }}</p>
                        {% empty %}
                            <p>暂无文章...</p>
                        {% endfor %}

                    </div>
                </div>

                <div class="paginator">
                    <P>
                        共{{ page_of_blogs.paginator.count }}篇文章,
                        当前第{{ page_of_blogs.number }}页
                        共{{ page_of_blogs.paginator.num_pages }}页
                    </P>
                    {# 分页器 #}
                    <ul class="pagination">
                        {# 上一页 #}
                        <li>
                            {% if page_of_blogs.has_previous %}
                                <a href="?page={{ page_of_blogs.previous_page_number }}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            {% endif %}
                        </li>
                        {# 全部页码 #}
                        {% for page_num in page_range %}
                            {% if page_num == page_of_blogs.number %}
                                <li class="active"><span>{{ page_num }}</span></li>
                            {% elif page_num == '...' %}
                                <li><span>{{ page_num }}</span></li>
                            {% else %}
                                <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                            {% endif %}
                        {% endfor %}
                        {# 下一页 #}
                        <li>
                            {% if page_of_blogs.has_next %}
                                <a href="?page={{ page_of_blogs.next_page_number }}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            {% endif %}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-2">
                <div class="panel panel-default">
                    <div class="panel-heading">博客分类</div>
                    <div class="panel-body">
                        <ul style="list-style-type: none;">
                            {% for blog_type in blog_types %}
                                <li>
                                    <a href="{% url 'blog_with_type' blog_type.pk %}">
                                        {{ blog_type.type_name }}({{ blog_type.blog_count }})
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">日期分类</div>
                    <div class="panel-body">
                        <ul class="blog-types">
                            {% for blog_date,blog_count in blog_dates.items %}
                                <li>
                                    <a href="{% url 'blog_with_date' blog_date.year blog_date.month %}">
                                        {{ blog_date | date:"Y年m月" }}({{ blog_count }})
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}



